﻿<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery</title>
    <script src="/js/layout.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/supersized/slideshow/css/supersized.css" type="text/css" />
    <link rel="stylesheet" href="/supersized/slideshow/theme/supersized.shutter.css"
        type="text/css" />
    <script type="text/javascript" src="/supersized/slideshow/js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="/supersized/slideshow/js/supersized.3.2.7.min.js"></script>
    <script type="text/javascript" src="/supersized/slideshow/theme/supersized.shutter.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.supersized.themeVars.image_path = '/supersized/slideshow/img/';
            var opts = {
                slideshow: 1,
                autoplay: 0,
                start_slide: 1,
                stop_loop: 0,
                random: 0,
                slide_interval: 3000,
                transition: 6,
                transition_speed: 1000,
                new_window: 1,
                pause_hover: 0,
                keyboard_nav: 1,
                performance: 1,
                image_protect: 1,
                min_width: 0,
                min_height: 0,
                vertical_center: 1,
                horizontal_center: 1,
                fit_always: 1,
                fit_portrait: 1,
                fit_landscape: 0,
                slide_links: 'blank',
                thumb_links: 1,
                thumbnail_navigation: 0,
                slides: [],
                progress_bar: 1,
                mouse_scrub: 0
            };
            var path = '/cygdrive/f/Pictures/2011-5-15';
            jsonrpc.invoke({
                method: 'files',
                params: {
                    path: path,
                    type: 1
                },
                success: function (data) {
                    var images = [];
                    for (var i in data.result) {
                        var item = data.result[i];
                        if (endsWith(item.name.toLowerCase(), '.jpg')) {
                            var src = '/?__command__=file&name=' + path + '/' + item.name;
                            images.push({ image: src, title: '', thumb: src, url: '' });
                        }
                    }

                    opts.slides = images;
                    $.supersized(opts);
                }
            });
        });
    </script>
</head>
<body>
    <!--Thumbnail Navigation-->
    <div id="prevthumb">
    </div>
    <div id="nextthumb">
    </div>
    <!--Arrow Navigation-->
    <a id="prevslide" class="load-item"></a><a id="nextslide" class="load-item"></a>
    <div id="thumb-tray" class="load-item">
        <div id="thumb-back">
        </div>
        <div id="thumb-forward">
        </div>
    </div>
    <!--Time Bar-->
    <div id="progress-back" class="load-item">
        <div id="progress-bar">
        </div>
    </div>
    <!--Control Bar-->
    <div id="controls-wrapper" class="load-item">
        <div id="controls">
            <a id="play-button">
                <img id="pauseplay" src="/supersized/slideshow/img/pause.png" /></a>
            <!--Slide counter-->
            <div id="slidecounter">
                <span class="slidenumber"></span>/ <span class="totalslides"></span>
            </div>
            <!--Slide captions displayed here-->
            <div id="slidecaption">
            </div>
            <!--Thumb Tray button-->
            <a id="tray-button">
                <img id="tray-arrow" src="/supersized/slideshow/img/button-tray-up.png" /></a>
            <!--Navigation-->
            <ul id="slide-list">
            </ul>
        </div>
    </div>
</body>
</html>
